<template>
	<view class="spc-container content">

		<u-navbar :fixed="false" :autoBack="false" :safeAreaInsetTop="true">
			<view slot="left">
				<text class="navbar-title">SPC统计过程控制模块</text>
			</view>

			<view class="u-nav-slot" slot="right">
				<m-capsule></m-capsule>
			</view>
		</u-navbar>

		<view class="flex-auto" style="padding: 10px 15px;">

			<!-- 功能菜单区 -->
			<view class="function-menu">
				<view class="menu-item" @click="navigateTo('/st_qms/spc/control_chart')">
					<view class="menu-icon">📊</view>
					<text class="menu-text">控制图监控（X-R图）</text>
				</view>
				<view class="menu-item" @click="navigateTo('/st_qms/spc/process_capability')">
					<view class="menu-icon">📈</view>
					<text class="menu-text">过程能力分析</text>
				</view>
				<view class="menu-item" @click="navigateTo('/st_qms/spc/data-entry')">
					<view class="menu-icon">📝</view>
					<text class="menu-text">数据录入</text>
				</view>
				<view class="menu-item" @click="navigateTo('/st_qms/spc/abnormal_handle')">
					<view class="menu-icon">⚠️</view>
					<text class="menu-text">异常处理</text>
				</view>
			</view>

			<!-- 模块信息概览 -->
			<view class="overview-panel">
				<view class="overview-item">
					<text class="overview-label">当前监控参数</text>
					<text class="overview-value">产品尺寸（mm）</text>
				</view>
				<view class="overview-item">
					<text class="overview-label">样本量</text>
					<text class="overview-value">n=3</text>
				</view>
				<view class="overview-item">
					<text class="overview-label">最新状态</text>
					<text class="overview-value normal">过程稳定（无异常）</text>
				</view>
				<view class="overview-item">
					<text class="overview-label">最后更新时间</text>
					<text class="overview-value">{{ lastUpdateTime }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lastUpdateTime: '2025-07-10 15:45:33'
			};
		},
		onLoad() {
			// 加载SPC基础数据（从接口获取当前监控参数、状态等）
			this.loadBaseData();
		},
		methods: {
			// 导航到子页面（路径为st_qms/spc/xxx）
			navigateTo(url) {
				console.log(url);

				uni.navigateTo({
					url
				});
			},
			navigateTo1() {
				console.log('111111');
				uni.navigateTo({
					url: './control_chart'
					// url: '/st_qms/spc/control_chart'
				})
			},
			loadBaseData() {
				// 模拟接口请求
				setTimeout(() => {
					// 实际项目中更新监控状态、时间等
				}, 600);
			}
		}
	};
</script>

<style scoped>
	/* 样式与之前一致，略 */
	.spc-container {
		background-color: #f9f9f9;
	}


	.navbar-title {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
	}

	.function-menu {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		margin-bottom: 25px;
	}

	.menu-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px 10px;
		text-align: center;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		cursor: pointer;
	}

	.menu-icon {
		font-size: 28px;
		margin-bottom: 10px;
		display: block;
	}

	.menu-text {
		font-size: 14px;
		color: #555;
	}

	.overview-panel {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.overview-item {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px dashed #eee;
	}

	.overview-item:last-child {
		border-bottom: none;
	}

	.overview-label {
		color: #666;
		font-size: 14px;
	}

	.overview-value {
		color: #333;
		font-size: 14px;
	}

	.overview-value.normal {
		color: #4cd964;
		/* 绿色表示正常 */
	}
</style>